import React, { useContext, useState, useEffect, useRef } from 'react';
import { Table, Input, Form, message, Tooltip, Divider, Button } from 'antd';
import { InfoCircleOutlined, SyncOutlined, LinkOutlined } from '@ant-design/icons';
import http from '../../../utils/request';

const EditableContext = React.createContext(null);

const EditableRow = ({ index, ...props }) => {
  const [form] = Form.useForm();
  return (
    <Form form={form} component={false}>
      <EditableContext.Provider value={form}>
        <tr {...props} />
      </EditableContext.Provider>
    </Form>
  );
};

const EditableCell = ({
  title,
  editable,
  children,
  dataIndex,
  record,
  handleSave,
  ...restProps
}) => {
  const [editing, setEditing] = useState(false);
  const inputRef = useRef(null);
  const form = useContext(EditableContext);
  useEffect(() => {
    if (editing) {
      inputRef.current.focus();
    }
  }, [editing]);

  const toggleEdit = () => {
    setEditing(!editing);
    form.setFieldsValue({
      [dataIndex]: record[dataIndex],
    });
  };

  const save = async () => {
    try {
      const values = await form.validateFields();
      toggleEdit();
      handleSave({ ...record, ...values });
    } catch (errInfo) {
      console.log('Save failed:', errInfo);
    }
  };

  let childNode = children;

  if (editable) {
    childNode = editing ? (
      <Form.Item
        style={{
          margin: 0,
        }}
        name={dataIndex}
        rules={[
          {
            required: true,
            message: `${title} is required.`,
          },
        ]}
      >
        <Input ref={inputRef} onPressEnter={save} onBlur={save} />
      </Form.Item>
    ) : (
      <div
        className="editable-cell-value-wrap"
        style={{
          paddingRight: 24,
        }}
        onClick={toggleEdit}
      >
        {children}
      </div>
    );
  }

  return <td {...restProps}>{childNode}</td>;
};

class BalanceTable extends React.Component {
  constructor(props) {
    super(props);
    this.columns = [
      {
        title: '账号',
        dataIndex: 'name', 
      },
      {
          title: '云平台',
          dataIndex: 'platform',
          render: (text, rowData) => {
            let png = ''
            if(rowData.platform === '拼多多'){
                png = <svg t="1643099684686" className="icon" viewBox="0 0 1173 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3153" width="26" height="26"><path d="M864.165 882.789h-546.67c-53.58 0-97.453-43.831-97.453-97.454v-546.67c0-53.623 43.83-97.454 97.453-97.454h546.714c53.58 0 97.41 43.831 97.41 97.454v546.713c0 53.58-43.83 97.41-97.454 97.41z" fill="#F40009" p-id="3154"></path><path d="M427.631 249.104l-140.98 99.482 140.98 103.32z m11.131 0v202.802l145.295-100.43zM286.649 363.037v201.335l138.566-100.645zM427.63 474.08v201.81L286.65 572.826z m11.131 0v201.81l138.307-100.906z m4.831 210.524l142.88 102.844-0.732-203.017z m152.07-100.171v203.015l142.405-103.104z m8.67-8.715l138.825-102.329 0.734 202.5z m148.704-102.329v202.5l142.448-101.983z m3.408-10.396l139.04 101.379V362.347z m-3.408-213.889v202.802L895.484 349.06z m-9.145 0L596.395 351.95l147.496 99.956z" fill="#FFFFFF" p-id="3155"></path><path d="M500.452 314.893c-0.26 5.004-4.918 8.973-10.612 8.973-5.738 0-10.354-3.969-10.613-8.973-11.993 2.028-16.393 5.824-25.668 10.526a1.938 1.938 0 0 0-0.475 3.107l7.507 11.13 3.925-3.969v39.904a4.05 4.05 0 0 0 4.055 4.056h42.149c2.415 0 4.4-1.985 4.4-4.4v-39.603l3.925 3.968 7.032-9.188c1.164-1.165 1.596-4.616 0.087-5.35-9.016-4.573-14.755-8.843-25.712-10.18zM364.69 377.835c0.173 0.302 2.976 4.874 8.326 5.09 4.357 0.13 7.161-2.718 7.593-3.192 0.518 0.474 4.055 3.364 9.06 2.674 4.615-0.646 7.16-3.925 7.592-4.53 0.388 0.26 4.573 2.848 8.153 1.08 3.883-1.942 4.358-7.205 3.624-10.312-0.432-1.81-1.164-2.415-3.278-5.435-0.475-0.69-2.502-4.185-6.558-11.216-1.639-2.804-3.624-6.298-5.91-10.354a210.443 210.443 0 0 1 2.372-10.138c0.95-3.71 1.51-5.349 0.734-7.42-0.259-0.647-0.518-1.08-2.718-4.53 1.596-3.278 1.51-6.169 0.173-7.075-0.82-0.56-1.984-0.215-2.2-0.172-1.898 0.56-3.236 2.933-3.236 5.953a9.498 9.498 0 0 0-4.875 1.64 9.998 9.998 0 0 0-2.545 2.545c-0.69-0.863-2.114-2.502-4.53-3.451a9.902 9.902 0 0 0-3.278-0.734c0.129-2.804-1.036-5.09-2.89-5.78-0.26-0.088-1.338-0.518-2.2-0.044-1.424 0.777-1.812 3.71-0.476 7.291a15.497 15.497 0 0 0-1.984 5.435c-0.604 3.538 0.172 6.601 0.734 8.672 1.035 3.925 2.114 4.745 1.812 7.075-0.26 2.113-1.424 3.71-2.374 4.702-4.486 8.067-8.929 16.177-13.416 24.244-0.733 3.366 0.734 6.816 3.624 8.5 2.674 1.638 6.126 1.422 8.671-0.518z m-40.724 64.623c0.56-7.678 6.428-13.762 13.416-14.494 8.025-0.864 15.919 5.52 16.653 14.494 2.286 0.259 6.04 1.08 9.145 3.925 1.38 1.295 3.322 3.582 5.263 12.124 1.64 7.247 2.028 13.33 2.632 23.036-0.26 1.036-1.036 3.796-3.624 6.169-2.674 2.46-5.652 2.934-6.686 3.063h-43.097c-1.122-0.172-4.53-0.82-7.42-3.796-2.546-2.588-3.236-5.522-3.452-6.687-0.086-1.683-0.69-19.154 4.357-28.43 0.777-1.38 2.157-3.968 5.09-6.168 2.891-2.157 5.911-2.934 7.723-3.236z" fill="#F40009" p-id="3156"></path><path d="M329.229 442.286h19.931s-1.984-8.672-9.966-8.672-9.965 8.672-9.965 8.672z" fill="#FFFFFF" p-id="3157"></path><path d="M403.818 602.162h4.702s-0.56-21.31 0-24.632c1.252-7.248 8.024-19.586 7.248-24.073-1.64-9.576-10.699-15.573-11.95-15.012s-11.95 12.51-15.228 21.354-9.232 21.182-10.138 21.355-10.483 1.466-19.197 4.702c-8.024 3.02-14.496 6.168-13.029 9.06s9.965 7.246 21.915 7.246c14.323 0 19.198-0.905 21.743-11.604 2.502-10.483 2.761-15.444 7.42-20.276 0.345-0.345 2.976-3.063 4.53-2.373 0 0 0.344 0.173 1.812 2.373l0.172 31.88z m54.486-2.544h63.2a5.218 5.218 0 0 0 2.157-1.08 5.446 5.446 0 0 0 1.812-3.062v-42.191c-0.259-0.604-0.776-1.64-1.812-2.546-1.639-1.423-3.537-1.596-4.184-1.638h-9.793c-0.647-1.424-1.812-2.158-4.53-5.953-0.992-1.381-2.588-1.727-3.624-2.158h-23.338c-0.82 0.431-2.158 0.733-2.718 1.812-1.985 3.796-3.797 4.789-4.357 6.341-4.271 0.173-8.585 0.346-12.856 0.562-0.474 0.086-1.467 0.388-2.373 1.25-1.207 1.208-1.423 2.675-1.467 3.064v41.802c0.087 0.475 0.475 1.725 1.64 2.718 0.905 0.733 1.768 0.992 2.243 1.079z m79.119 41.285l-3.796 4.874h7.764z m-39.474 42.362c0.388-2.76 2.632-17.688 16.134-27.523 11.95-8.714 27.05-9.318 37.618-5.134 6.73 2.675 12.036 7.42 12.9 8.197 3.148 2.847 5.824 5.263 7.808 9.404 4.702 9.793 3.149 15.013 4.702 15.013-1.51-0.905-5.306-2.89-10.483-2.717-4.443 0.128-7.722 1.81-9.232 2.717-1.424-0.949-4.53-2.76-8.887-3.063a18.096 18.096 0 0 0-7.076 0.905v30.76c-0.43 1.294-1.293 3.236-2.976 5.004-3.278 3.408-8.714 5.264-13.847 3.71-6.903-2.114-9.62-9.318-9.534-12.51 0.043-1.467 0.69-2.675 0.69-2.675 0.172-0.26 1.596-2.847 3.796-2.761 1.984 0.087 3.322 2.286 3.796 3.624 0.648 1.768-0.129 2.416 0.562 3.624 1.12 2.07 4.83 3.02 6.686 1.812 0.949-0.648 2.847-3.668 2.157-2.718l0.906-28.085c-1.64-0.474-4.703-1.164-8.499-0.56a19.043 19.043 0 0 0-7.42 2.89 19.769 19.769 0 0 0-9.965-2.718c-4.875 0.13-8.326 1.941-9.836 2.804z m122.345-11.82v36.108c0 3.321 2.718 6.04 6.04 6.04h35.46a5.1 5.1 0 0 0 5.091-5.091v-36.927c0-2.115-1.725-3.884-3.882-3.884h-38.999c-2.028 0-3.71 1.683-3.71 3.754z m3.667-9.534h40.336c1.165 0 2.2-0.82 2.33-1.898 0.129-1.252-0.39-2.632-3.495-2.632H623.96c-1.294 0-2.33 0.992-2.33 2.244-0.043 1.25 1.036 2.286 2.33 2.286z m1.812-4.53s5.22-10.483 15.228-10.483c18.81-0.043 20.837 10.483 20.837 10.483h-36.065z" fill="#F40009" p-id="3158"></path><path d="M645.747 650.437h-3.15a1.98 1.98 0 0 1-1.983-1.985v-3.969c0-1.079 0.863-1.984 1.984-1.984h3.15c1.079 0 1.984 0.862 1.984 1.984v3.969a1.98 1.98 0 0 1-1.985 1.984z m37.619-101.509c1.94-1.337 6.514-4.012 12.855-4.357 7.938-0.432 13.676 3.063 15.574 4.357l-3.063-11c-0.431-1.64-1.941-2.762-3.624-2.762h-15.573c-1.51 0-2.848 1.036-3.193 2.459l-2.976 11.303z m28.385 48.36c-1.94 1.337-6.514 4.012-12.855 4.357-7.938 0.431-13.676-3.063-15.574-4.357l3.064 11c0.43 1.64 1.94 2.762 3.623 2.762h15.574c1.51 0 2.847-1.036 3.192-2.46l2.976-11.302z" fill="#F40009" p-id="3159"></path><path d="M674.652 572.741a22.735 22.735 0 1 0 45.469 0 22.735 22.735 0 1 0-45.47 0z m108.195-28.688h-2.33a1.73 1.73 0 0 1-1.726-1.726v-8.498a1.73 1.73 0 0 1 1.726-1.726h2.33a1.73 1.73 0 0 1 1.725 1.726v8.498a1.73 1.73 0 0 1-1.725 1.726z m20.146 0h-2.502a1.87 1.87 0 0 1-1.856-1.855V531.93c0-0.992 0.82-1.855 1.856-1.855h2.502c0.992 0 1.855 0.82 1.855 1.855v10.269a1.868 1.868 0 0 1-1.855 1.855z m20.319 0h-2.632a1.934 1.934 0 0 1-1.94-1.94V534a1.934 1.934 0 0 1 1.94-1.94h2.632a1.934 1.934 0 0 1 1.94 1.94v8.111c-0.042 1.078-0.905 1.94-1.94 1.94z m1.596 61.906h-45.772a5.8 5.8 0 0 1-5.824-5.824v-47.8a2.32 2.32 0 0 1 2.33-2.328h53.149a2.118 2.118 0 0 1 2.113 2.113v47.842a5.984 5.984 0 0 1-5.996 5.997z" fill="#F40009" p-id="3160"></path><path d="M829.827 563.595s10.569 1.166 14.105 7.076c3.97 6.6 1.941 14.322-2.544 17.902-4.703 3.797-10.484 3.797-10.484 3.797v-5.436s9.965-2.89 9.06-9.793-10.138-7.98-10.138-7.98v-5.566z m-26.834-103.104c-0.992 1.768-0.949 3.925 0.086 5.694 2.416 4.142 7.808 10.052 14.02 14.15 8.283 5.436 15.013 4.357 15.013 4.357s10.31 9.405 13.417 10.139 3.968-0.907 3.968-3.452V481.24s7.248-2.717 11.044-6.513 5.954-6.342 8.155-5.608 7.591 8.154 11.777 8.886 7.247-1.811 5.78-6.168-3.969-8.456-3.969-8.456 4.357-5.867 4.357-10.008c0-4.185-4.184-7.42-7.98-5.436s-7.981 8.671-10.484 8.671-7.765-6.988-12.855-9.275-6.17-3.02-6.17-3.02 1.252-10.87 0-12.51-5.952 0.173-8.886 2.373-7.98 7.42-7.98 7.42-9.06-0.173-19.543 7.074c-4.616 3.193-7.938 8.542-9.75 11.82zM771.5 352.77a30.888 30.888 0 1 0 61.776 0 30.888 30.888 0 1 0-61.776 0z" fill="#F40009" p-id="3161"></path><path d="M778.92 304.885s7.766-1.77 13.417 0.56c7.42 3.064 8.154 13.417 8.154 13.417s-6.86 3.968-14.108-1.467-7.462-12.51-7.462-12.51z m40.423 3.71s-5.867-1.338-10.139 0.43c-5.607 2.33-6.168 10.14-6.168 10.14s5.22 3.02 10.699-1.08 5.608-9.49 5.608-9.49z m-137.185 71.138h31.707c0.26 0 0.389-0.346 0.13-0.475-1.38-0.777-4.4-2.416-8.068-3.753-5.09-1.812-6.514-3.063-6.514-3.063v-10.785s6.514-5.479 10.872-8.844 11.389-12.597 11.389-20.362-2.89-20.19-2.89-20.19h-43.227s-3.063 17.257-1.467 24.504c2.718 9.232 10.872 15.918 15.013 19.715s6.17 5.436 6.17 5.436v11.044l-13.288 5.996c-0.388 0.173-0.259 0.777 0.173 0.777z" fill="#F40009" p-id="3162"></path><path d="M536.517 420.758l14.107-30.068 10.87 29.336 11.606 1.466v10.31l17.73-3.623-12.856-36.583 34.383 14.495-8.024 24.417 16.738-3.796 14.84-36.021 24.46 19.024-24.115 18.637 24.116-0.173 5.953 18.636h-15.401l-5.435 22.476 19.757 4.1 6.342 17.772-23.554 2.718-5.436 37.834-12.855 8.37-8.154-47.8-15.53-1.122-9.664 40.768-13.545 8.153-1.597-46.375-11.605-1.251-4.529-14.15-5.263 6.902-7.248 55.737-28.775-20.449 18.464-5.22-3.408-26.832-10.138 8.541-8.714-28.99 20.104-3.236-2.373-20.275-5.953-1.294-9.62-17.558z" fill="#FFFFFF" p-id="3163"></path><path d="M566.93 436.505l-5.608 7.42-2.89 20.837 17.386-1.035-5.264 11.519 17.386-6.17L584.057 451l-11.69-3.278z m43.615 14.28l14.668-3.236 2.028 20.62-19.931 3.84z" fill="#F40009" p-id="3164"></path></svg>
            }else if(rowData.platform === '腾讯云'){
                png = <svg t="1644912249991" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7390" width="24" height="24"><path d="M669.866667 465.066667c-17.066667 0-34.133333 4.266667-59.733334 25.6-12.8 8.533333-25.6 21.333333-29.866666 25.6l-38.4 38.4c-21.333333 21.333333-51.2 46.933333-81.066667 81.066666h204.8c34.133333 0 51.2-12.8 59.733333-25.6 34.133333-29.866667 34.133333-85.333333 0-119.466666-8.533333-17.066667-29.866667-25.6-55.466666-25.6z" fill="#00A3FF" p-id="7391"></path><path d="M512 85.333333C277.333333 85.333333 85.333333 277.333333 85.333333 512s192 426.666667 426.666667 426.666667 426.666667-192 426.666667-426.666667S746.666667 85.333333 512 85.333333z m0 166.4c81.066667 0 149.333333 51.2 174.933333 123.733334-12.8 0-25.6 4.266667-38.4 4.266666-4.266667 0-12.8 0-17.066666 4.266667 0 4.266667-4.266667 0-4.266667 0-21.333333-46.933333-68.266667-76.8-119.466667-76.8-64 0-115.2 42.666667-128 102.4H324.266667C341.333333 320 418.133333 251.733333 512 251.733333z m-256 401.066667c-55.466667-55.466667-55.466667-145.066667-4.266667-200.533333 25.6-25.6 59.733333-42.666667 98.133334-42.666667 29.866667 0 55.466667 8.533333 85.333333 29.866667l4.266667 4.266666c12.8 12.8 38.4 29.866667 51.2 46.933334v4.266666l-34.133334 38.4h-4.266666l-21.333334-21.333333c-8.533333-8.533333-17.066667-12.8-21.333333-21.333333-21.333333-21.333333-42.666667-25.6-55.466667-25.6-25.6 0-42.666667 8.533333-59.733333 25.6-29.866667 34.133333-29.866667 89.6 4.266667 123.733333 12.8 12.8 29.866667 21.333333 64 25.6h29.866666l-55.466666 55.466667c-34.133333-8.533333-59.733333-21.333333-81.066667-42.666667z m512-4.266667c-25.6 25.6-55.466667 38.4-89.6 38.4-12.8 4.266667-29.866667 4.266667-46.933333 4.266667h-256c-12.8 0-25.6 0-38.4-4.266667l213.333333-213.333333 21.333333-21.333333 12.8-12.8c25.6-21.333333 55.466667-29.866667 89.6-29.866667 38.4 0 72.533333 17.066667 98.133334 42.666667 51.2 51.2 51.2 140.8-4.266667 196.266666z" fill="#00A3FF" p-id="7392"></path></svg>
            }else if(rowData.platform === '京东商家开放平台'){
                png = <svg t="1644913771914" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15638" width="19" height="19"><path d="M510.976 1007.616C236.9536 1007.616 14.9504 785.6128 14.9504 511.7952 14.9504 237.7728 236.9536 15.7696 510.976 15.7696c273.8176 0 496.0256 222.0032 496.0256 496.0256C1006.7968 785.6128 784.7936 1007.616 510.976 1007.616z m104.6528-264.3968c124.3136 0 225.0752-110.7968 225.0752-247.6032 0-136.8064-100.7616-247.6032-225.0752-247.6032h-150.1184v495.2064h150.1184z m-405.2992 0c99.5328 0 180.224-78.2336 180.224-174.6944V248.0128h-60.0064v320.3072c0 64.3072-53.6576 116.5312-120.0128 116.5312H180.224v58.1632h30.1056v0.2048z m0 0" fill="#EE0F23" p-id="15639"></path><path d="M615.6288 306.176h-90.112v378.6752h90.112c91.136 0 165.0688-84.7872 165.0688-189.2352s-73.728-189.44-165.0688-189.44z m0 0" fill="#EE0F23" p-id="15640"></path></svg>
            }else if(rowData.platform === '京东云鼎'){
                png = <svg t="1644910847133" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1904" width="24" height="24"><path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#EBEBEB" p-id="1905"></path><path d="M819.114667 467.626667c7.338667 10.325333 12.885333 24.32 12.245333 53.632-8.277333 92.074667-86.442667 150.229333-164.266667 150.229333-84.266667 0-143.530667-60.586667-179.2-128.341333-8.448-16-14.549333-33.877333-20.309333-49.322667-11.264 15.317333-34.986667 40.277333-47.061333 51.882667 7.296 20.650667 16.853333 40.405333 28.501333 58.922666 9.514667 14.805333 33.493333 48.341333 67.797333 74.88 31.146667 24.064 61.098667 38.826667 94.933334 47.274667a231.808 231.808 0 0 0 168.533333-23.765333c61.184-35.072 104.362667-99.712 112.170667-166.784-15.104-25.002667-47.786667-54.528-73.386667-68.608zM304.170667 443.221333c21.333333 0 42.24 5.973333 60.330666 17.28 14.506667-15.445333 27.306667-31.402667 40.661334-47.530666a176.085333 176.085333 0 0 0-275.072 171.349333c4.906667 6.058667 54.485333 1.92 62.250666-5.034667a114.005333 114.005333 0 0 1 111.786667-136.106666zM304.170667 733.482667a176.128 176.128 0 0 1-152.533334-88.064c2.346667-3.157333 57.770667-9.301333 70.997334-8.533334a113.621333 113.621333 0 0 0 81.493333 34.304s70.101333 5.418667 135.637333-46.378666c0 0 24.618667 35.114667 43.52 48.298666 0 0-61.738667 60.373333-179.114666 60.373334z" fill="#E1251B" p-id="1906"></path><path d="M760.149333 297.429333c-83.2-34.986667-164.394667-24.746667-244.608 34.218667-70.741333 51.968-98.901333 104.32-144.170666 149.290667-54.101333 53.76-94.72 71.850667-126.890667 84.010666-33.237333 12.586667-79.616 21.162667-114.389333 19.242667 3.328 21.546667 10.666667 42.24 21.546666 61.098667 88.746667-1.493333 151.338667-35.456 191.701334-60.074667 35.285333-21.546667 88.32-75.733333 116.224-110.848 44.757333-56.32 103.082667-110.208 156.416-127.146667 74.453333-23.552 146.901333 9.429333 181.973333 56.021334 3.157333 4.096 68.992 27.733333 89.685333 45.525333-7.594667-32.256-43.52-116.053333-127.488-151.338667z" fill="#E1251B" p-id="1907"></path><path d="M885.674667 441.642667a236.330667 236.330667 0 0 0-134.4-43.178667c-58.24 0-116.608 22.698667-157.653334 63.146667-29.866667 29.354667-44.373333 53.205333-77.525333 92.928 12.458667 18.944 27.264 36.266667 44.032 51.541333 4.266667-6.229333 28.330667-40.32 46.378667-64.256 23.210667-30.464 46.762667-54.826667 82.474666-68.906667a166.314667 166.314667 0 0 1 203.093334 66.218667 230.954667 230.954667 0 0 0-6.4-97.493333z" fill="#E1251B" p-id="1908"></path></svg>
            }else if(rowData.platform === '聚石塔'){
                png = <svg t="1644912362083" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9788" width="24" height="24"><path d="M512 73.28A438.72 438.72 0 1 0 950.72 512 438.72 438.72 0 0 0 512 73.28zM301.44 266.4a52.64 52.64 0 1 1-52.64 52.64 52.64 52.64 0 0 1 52.64-52.64z m-23.68 464l-89.12-64s124.96-102.56 117.92-136.64-93.12-76.64-93.12-76.64l40-56.48s102.56 67.04 109.6 120.16-85.28 213.44-85.28 213.44z m529.44-100.16s-8.32 67.2-65.92 90.72-146.24 5.92-146.24 5.92l4.8-36.64s52.96 11.84 85.92 1.28a67.2 67.2 0 0 0 42.56-36.64V392a75.04 75.04 0 0 0-35.36-45.92c-30.72-18.72-46.08-16-79.04-11.68a393.44 393.44 0 0 0-83.68 28.16l-28.16 55.36h190.88v37.76H576v47.2h121.6v32.96l-119.04 4.64v89.6l56.64-24.8-4.64-38.88 45.92-9.44 34.08 89.6L654.08 672l-7.2-32s-106.88 45.12-149.76 48-84.96-6.72-105.44-35.68-16-87.2-16-87.2l76.16 1.92a82.08 82.08 0 0 0 9.12 54.08c15.04 20.96 48.96 16 48.96 16v-99.04l-117.76-3.52v-32H512l-1.28-47.2-36.96-7.36s-30.56 48-50.72 46.56S400 466.24 400 466.24l64.8-80-35.2-3.68-53.12 62.56-40-35.36a294.56 294.56 0 0 0 51.84-64 281.28 281.28 0 0 0 30.56-75.36l64.8 25.92-18.88 36.48s4.8 4.8 21.28 2.4 124.96-56.48 199.04-43.52 121.44 71.84 121.44 117.76z" fill="#FC8848" p-id="9789"></path></svg>
            }else if(rowData.platform === '淘宝开放平台'){
                png = <svg t="1645603193102" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10977" width="18" height="18"><path d="M420.66 510.78c0.67-0.72 27.89-30.16 57.9-59.71h23.54v59.71z m83.59-171c175.37-63.57 262.81-52.78 262.82 51.61v275.1s0.13 0.75 0.29 1.81l-40-99.07-62.57 19.52 10.78 44.07c-16 12-55.78 20.94-55.78 27.63V540.6h117.8v-30H619.81v-59.67h117.78v-59.69H520.78c16.85 0 25.47-34 29-46.2z m383.58 335.29C908.17 480.8 882.59 357 882.59 357s-22.4-179.16-409.52-68.11c16.41-29.17 24.53-48.28 24.53-48.28l-96.75-27.34S362 342.12 292.45 402.36c0 0 67.26 39.19 66.59 38.15a716.47 716.47 0 0 0 51.58-58.68q22.28-10 44.84-19.24c-17.79 32.69-46.74 81.42-75.68 112.28l40.59 35.91h-65.53v29.87h147.27v129.88c-14.69-0.83-32.31-7.24-41.17-21.69-11-17.65-3-48.43-2.41-78.33h-93l-3.39 10s-34 162.93 98.41 159.54c123.78 3.32 194.78-34.93 228.79-61.44l13.51 51.17 63.54-26.76c-5.63 25.78-25.2 55.13-86.32 51.16l-48.35-12.58-13.48 55.56s249.22 72.16 269.59-122.09z m-569.14-74.28c18.58-58.48 22.57-103.09-9-135.12-40.77-41.48-45.37-45.29-105.87-90.83l-43.31 67.65 80.21 50.71s53.38 27.67 28 79.61c-24 49.27-140.81 157-140.81 157L232.69 796c72.31-159.25 67.8-138 86-195.21zM261.05 223.9c-38.09 0-69 28.2-69 62.81s30.91 62.72 69 62.72 69-28.19 69-62.72-30.85-62.81-69-62.81zM170.67 0h682.66A170.67 170.67 0 0 1 1024 170.67v682.66A170.67 170.67 0 0 1 853.33 1024H170.67A170.67 170.67 0 0 1 0 853.33V170.67A170.67 170.67 0 0 1 170.67 0z" fill="#FF6600" p-id="10978"></path></svg>
            }else{
                png = <svg t="1643100085184" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4134" width="24" height="24"><path d="M512 64a448 448 0 1 1 0 896A448 448 0 0 1 512 64z" fill="#FF6A00" p-id="4135"></path><path d="M324.8 602.624a26.752 26.752 0 0 1-21.312-25.92v-142.72a27.712 27.712 0 0 1 21.376-25.984l132.416-28.672 13.952-56.896H317.312a97.6 97.6 0 0 0-98.24 96.96v169.344c0.384 54.08 44.16 97.856 98.24 98.176h153.92l-13.888-56.512-132.544-27.776zM710.4 322.432c54.016 0.128 97.92 43.584 98.56 97.6v170.176a98.368 98.368 0 0 1-98.56 98.048H555.328l14.08-56.832 132.608-28.736a27.84 27.84 0 0 0 21.376-25.92v-142.72a26.88 26.88 0 0 0-21.376-25.984l-132.544-28.8-14.08-56.832zM570.368 497.92v13.952H457.28v-13.952h113.088z" fill="#FFFFFF" p-id="4136"></path></svg>
            }
            return (
                <div style={{ verticalAlign: 'top' }}>
                    <Tooltip title={text}>{png} {text}</Tooltip>
                </div>
            )
        },
      },
      {
        title: 
        <div>余额&nbsp;
            <Tooltip placement='bottom' title={<div><span>京东云鼎和开放平台余额区分，实际为同一账号。聚石塔账号区分服务器余额和API余额。</span></div>}>
                <InfoCircleOutlined />
            </Tooltip>
        </div>,
        dataIndex: 'balance',
        defaultSortOrder: 'descend',
        sorter: (a, b) => a.balance - b.balance,
        render: text => `¥ ${text}`,
      },
      {
        title:
        <div>阈值&nbsp;
            <Tooltip placement='bottom' title={<div><span>点击表格数值修改告警阈值</span></div>}>
                <InfoCircleOutlined />
            </Tooltip>
        </div>,
        dataIndex: 'balance_alert',
        editable: true,
        render: (text, rowData) => {
            let font_color = rowData.balance < rowData.balance_alert ? 'red' : ''
            return (
                <div style={{ color: font_color }}>
                ¥ {text}
                </div>
            )
        }
      },
      // {
      //   title: 
      //   <div>API余额&nbsp;
      //       <Tooltip placement='bottom' title={<div><span>聚石塔账号区分账号余额和API余额。</span></div>}>
      //           <InfoCircleOutlined />
      //       </Tooltip>
      //   </div>,
      //   dataIndex: 'api_balance',
      //   defaultSortOrder: 'descend',
      //   sorter: (a, b) => a.api_balance - b.api_balance,
      //   render: text => `¥ ${text}`,
      // },
      // {
      //   title:
      //   <div>API阈值&nbsp;
      //       <Tooltip placement='bottom' title={<div><span>点击表格数值修改告警阈值</span></div>}>
      //           <InfoCircleOutlined />
      //       </Tooltip>
      //   </div>,
      //   dataIndex: 'api_balance_alert',
      //   editable: true,
      //   render: (text, rowData) => {
      //       let font_color = rowData.api_balance < rowData.api_balance_alert ? 'red' : ''
      //       return (
      //           <div style={{ color: font_color }}>
      //           ¥ {text}
      //           </div>
      //       )
      //   }
      // },
      {
          title: 
          <div>更新时间&nbsp;
            <Tooltip placement='bottom' title={<div><span>每日08:00同步余额，01:00同步云安全分数，所有为01:00时，余额同步可能失败了。</span></div>}>
                <InfoCircleOutlined />
            </Tooltip>
          </div>,
          dataIndex: 'updated',
          key: 'updated'
      },
      {
          title: '操作',
          dataIndex: 'link',
          render: (text, rowData) => {
            let url = ''
            if(rowData.platform === '拼多多'){
                url = 'https://open.pinduoduo.com/expense/account'
            }else if(rowData.platform === '腾讯云'){
                url = 'https://console.cloud.tencent.com/expense/overview'
            }else if(rowData.platform === '京东商家开放平台'){
                url = 'https://open-console.jd.com/home/home#/costCenter/index/accountDetail'
            }else if(rowData.platform === '京东云鼎'){
                url = 'https://capital.jdcloud.com/cost/capital/capital-overview'
            }else if(rowData.platform === '聚石塔'){
                url = 'https://console.cloud.tmall.com/?spm=a212tf.12349310.0.0.733d1e9bnMptOZ#/bill/center'
            }else if(rowData.platform === '淘宝开放平台'){
                url = 'https://console.open.taobao.com/?spm=a219a.15212433.0.0.57ed669aGcr0no#/personalCenter/chargeBill'
            }else{
                url = 'https://usercenter2.aliyun.com/home'
            }
            return (
                <div>
                    <Tooltip title="手动同步余额，通过爬虫获取可能会请求超时，过几分钟后刷新页面即可。">
                      <Button onClick={() => this.sync_balance({ account_id: rowData.id })} 
                              size='small' type="link" icon={<SyncOutlined />} />
                    </Tooltip>
                    <Divider type="vertical"/>
                    <Tooltip title="跳转到云平台费用中心。">
                      <Button size='small' type="link" href={url} target="_blank" icon={<LinkOutlined />} />
                    </Tooltip>
                </div>
            )
          }
      }
    ];
    this.state = {
      dataSource: []
    };
  }

  /** 生命周期挂载完成 */
  componentDidMount(){
      this.getData()
  }

  /** 同步余额 */
  sync_balance = (params) => {
    console.log(params)
    const account_id = params.account_id;
    http.post(`/sync/balance/${account_id}`).then(response => {
      console.log(response.data)
      const data = response.data
      message.success(data.msg)
    }).catch(err => {
      message.error(err)
    })
  }

  // api
  getData = () => {
      const requestData = {
          'page': 1,
          'limit': 100
      }
      http.get('/account', {params: requestData}).then(response => {
          const data = response.data.data.items
          console.log(data)
          this.setState({ dataSource: data })
      })
  }

  handleSave = (row) => {
    console.log(row)
    // update api
    const requestData = {
        'balance_alert': row.balance_alert,
        'api_balance_alert': row.api_balance_alert
    };
    http.put('/account/' + row.id, requestData).then(respones => {
        message.success(respones.data.msg)
    })
    const newData = [...this.state.dataSource];
    console.log('row====>', row, newData)
    const index = newData.findIndex((item) => row.id === item.id);
    const item = newData[index];
    newData.splice(index, 1, { ...item, ...row });
    console.log(newData, index, item)
    this.setState({
      dataSource: newData,
    });
  };

  render() {
    const { dataSource } = this.state;
    const components = {
      body: {
        row: EditableRow,
        cell: EditableCell,
      },
    };
    const columns = this.columns.map((col) => {
      if (!col.editable) {
        return col;
      }

      return {
        ...col,
        onCell: (record) => ({
          record,
          editable: col.editable,
          dataIndex: col.dataIndex,
          title: col.title,
          handleSave: this.handleSave,
        }),
      };
    });
    return (
      <div>
        <Table
          components={components}
          rowClassName={() => 'editable-row'}
          bordered
          dataSource={dataSource}
          columns={columns}
        //   pagination={false}
        //   scroll={{ y: 640 }}
        />
      </div>
    );
  }
}

export default BalanceTable;